<template>
  <div v-if="orderDetail.orderBase" class="order-detail">
    <el-card shadow="never" class="margin-30">
      <el-steps :active="orderDetail.orderBase.status + 1">
        <el-step title="待付款" :description="orderDetail.orderBase.createTime" />
        <el-step title="待发货" :description="orderDetail.orderBase.paymentTime" />
        <el-step title="已发货" :description="orderDetail.orderBase.deliveryTime" />
        <el-step v-if="orderDetail.orderBase.status!=4" title="已完成" :description="orderDetail.orderBase.receiveTime" />
        <el-step v-if="orderDetail.orderBase.status!=3" title="退货" :description="orderDetail.orderBase.finishTime" />
      </el-steps>
      <el-divider />
      <div>
        <h4>
          订单信息:
          <el-tag v-if="orderDetail.orderBase.status===0" type="danger" size="mini" effect="dark">待付款</el-tag>
          <el-tag v-if="orderDetail.orderBase.status===1" type="warning" size="mini" effect="dark">待发货</el-tag>
          <el-tag v-if="orderDetail.orderBase.status===2" size="mini" effect="plain">已发货</el-tag>
          <el-tag v-if="orderDetail.orderBase.status===3" size="mini" effect="dark">已完成</el-tag>
          <el-tag v-if="orderDetail.orderBase.status===4" type="info" size="mini" effect="dark">退货</el-tag>
          <el-tag v-if="orderDetail.orderBase.status===5" type="info" size="mini" effect="dark">无效订单</el-tag>
        </h4>

        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>订单金额:</span>
            <span style="color:red">{{ orderDetail.orderBase.totalAmount }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>订单编号:</span>
            <span>{{ orderDetail.orderBase.orderSn }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>用户账号:</span>
            <span>{{ orderDetail.orderBase.memberUsername }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>备注:</span>
            <span>{{ orderDetail.orderBase.note }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>下单时间:</span>
            <span>{{ orderDetail.orderBase.createTime }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>订单编号:</span>
            <span>{{ orderDetail.orderBase.orderSn }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>用户账号:</span>
            <span>{{ orderDetail.orderBase.memberUsername }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>备注:</span>
            <span>{{ orderDetail.orderBase.note }}</span>
          </el-col>
        </el-row>

      </div>
      <el-divider />
      <div>
        <h4>收货人信息:</h4>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>订单金额:</span>
            <span style="color:red">{{ orderDetail.orderBase.totalAmount }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>订单编号:</span>
            <span>{{ orderDetail.orderBase.orderSn }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>用户账号:</span>
            <span>{{ orderDetail.orderBase.memberUsername }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>备注:</span>
            <span>{{ orderDetail.orderBase.note }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>下单时间:</span>
            <span>{{ orderDetail.orderBase.createTime }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>订单编号:</span>
            <span>{{ orderDetail.orderBase.orderSn }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>用户账号:</span>
            <span>{{ orderDetail.orderBase.memberUsername }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>备注:</span>
            <span>{{ orderDetail.orderBase.note }}</span>
          </el-col>
        </el-row>

      </div>
      <el-divider />

      <div>
        <h4>商品信息:</h4>
        <el-table :data="orderDetail.orderItems" border stripe>
          <el-table-column
            prop="productName"
            label="商品名称"
            align="center"
          />
          <el-table-column
            prop="productName"
            label="商品图片"
            align="center"
          >
            <template slot-scope="scope">
              <img width="100" height="100" :src="scope.row.productPic" alt="">
            </template>
          </el-table-column>
          <el-table-column
            label="是否退货"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isReturn === 0">否</span>
              <span v-if="scope.row.isReturn === 1" style="color:red">是</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="productBrand"
            label="品牌"
            align="center"
          />
          <el-table-column
            prop="productPrice"
            label="价格"
            align="center"
          />
          <el-table-column
            prop="productQuantity"
            label="个数"
            align="center"
          />
          <el-table-column
            prop="totalPrice"
            label="小计"
            align="center"
          />
        </el-table>

      </div>
      <el-divider />
      <div>
        <h4>
          费用信息：
        </h4>

        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <span>运费金额:</span>
            <span style="color:red">0</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>订单总金额:</span>
            <span>{{ orderDetail.orderBase.totalAmount }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>实际金额:</span>
            <span>{{ orderDetail.orderBase.payAmount }}</span>
          </el-col>
          <el-col :span="6" :offset="0">
            <span>促销优化金额:</span>
            <span>0</span>
          </el-col>
        </el-row>
        <el-form v-if="orderDetail.orderBase.status === 1" ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="物流公司" prop="deliveryCompany">

                <el-select v-model="form.deliveryCompany" clearable>
                  <el-option
                    label="中国邮政"
                    value="中国邮政"
                  />
                  <el-option
                    label="中通"
                    value="中通"
                  />
                  <el-option
                    label="申通"
                    value="申通"
                  />
                  <el-option
                    label="韵达"
                    value="韵达"
                  />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="物流单号" prop="deliverySn">
                <el-input v-model="form.deliverySn" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" @click="doSend">确认发货</el-button>
          </el-form-item>
        </el-form>

      </div>
      <el-divider />
      <div v-if="orderDetail.orderBase.status>=2">
        <h4>
          物流信息:{{ orderDetail.orderBase.deliveryCompany }}[{{ orderDetail.orderBase.deliverySn }}]
        </h4>
        <!-- 表格 -->
      </div>

    </el-card>
  </div>
</template>
<script>
import {
  orderDetail as orderDetailApi,
  sendDone as sendDoneApi
} from '@/api/order/order'

export default {
  mixins: [],
  data() {
    return {
      orderId: '',
      orderDetail: {},
      rules: {
        deliveryCompany: [{ required: true, message: '物流公司必填', trigger: 'blur' }],
        deliverySn: [{ required: true, message: '物流单号必填', trigger: 'blur' }]
      },
      form: {}
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.orderId = this.$route.params.id
    if (this.orderId) {
      this.getOrderDetail()
    }
  },
  mounted() {
  },
  methods: {
    async getOrderDetail() {
      const res = await orderDetailApi(this.orderId)
      this.orderDetail = res.data.orderDetail
    },
    // 确认发货
    doSend() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          this.form.orderId = this.orderId
          const res = await sendDoneApi(this.form)
          const { success, message } = res
          if (success) {
            // 刷新数据
            this.getOrderDetail()
          } else {
            this.$message.error(message)
          }
        } else {
          this.$message.warning('请注意表单校验')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.order-detail{
  .el-steps{
    padding: 50px 200px;
  }
}
</style>
